<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeType">
        <a-tab-pane key="1" title="角色详情">
          <page-form layout="vertical">
            <page-form-row>
              <page-form-item label="角色名称" size="1/3">
                <a-input disabled placeholder="请输入" :max-length="20" v-model="route.query.role" />
              </page-form-item>
              <page-form-item field="description" label="备注" size="2/3">
                <a-input disabled placeholder="请输入" :max-length="200" allow-clear v-model="route.query.description" auto-size />
              </page-form-item>
            </page-form-row>
            <page-form-row>
              <page-form-item v-for="(item, index) in changeList" :key="index" size="1/2">
                <permissionTable :id="roleId" :disabled="true" :title="item.title" :index="index" />
              </page-form-item>
            </page-form-row>
          </page-form>
        </a-tab-pane>
        <a-tab-pane key="2" title="操作记录">
          <OperateLog :id="route.params.id" type="12" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup name="MerchantRoleDetail">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import permissionTable from '../components/permissionTable.vue'
  const route = useRoute()
  const changeList = [{ title: 'PC端后台权限' }, { title: 'APP端后台权限' }]
  const activeType = ref('1')
  const roleId = route.params.id
</script>
<style lang="less" scoped>
  .basic-info-wrapper {
    .section-item {
      .section-item-header {
        color: #1d2129ff;
        font-weight: 600;
      }
      .section-item-content {
        padding: 20px 20px 0 20px;
      }
      &.gray {
        background-color: rgba(var(--gray-1), 0.5) !important;
        border-radius: 0px 0px 0px 0px;
        .section-item-content {
          padding: 20px 20px 12px 20px;
        }
      }
    }
    .section-item + .section-item {
      margin-top: 16px;
    }
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
  .fx {
    display: flex;
  }
  .info {
    margin: 30px 0;
  }
</style>
